<!-- 我是跟单发起人 -->
<template>
  <div class="bg">

    <div class="bg bg1" v-if="myMap">

      <list class="list" :loadmoreoffset="50" @loadmore="httpFollowStrategyList">

        <cell v-for="(item, index) in datas" v-bind:key="index">
          
          <!--头部数据-->
          <div v-if="index == 0">

            <!-- 顶部 -->
            <LImage class="top-bg" :src="Config.img('gendan_bg.png')"></LImage>

            <div class="top-info">
              <LImage class="top-img bg1" :src="myMap.avatar ? myMap.avatar : Config.img('view_image_portrait_normal.png')"></LImage>
              <div class="cloumn">
                <text class ="font32 text1">{{myMap.nickName}}</text>
                <div class="height22"></div>
                <div class="row acenter" @click="markClick">
                  <LImage class="edit" :src="Config.img('editor_white.png')"></LImage>
                  <text class ="edit-text font24 text1">{{myMap.mark}}</text>
                </div> 
              </div>
            </div>

            <!-- 策略跟单的信息 -->
            <div class="data bg2">
              <LImage class="texture3" :src="Config.img('texture3.png')"></LImage>
              <div class="data-row">
                <div class="column">
                  <text class="font24 text2">{{T("累计跟单投入")+'(BTC)'}}</text>
                  <text class="font24 text1">{{myMap.totalInvest}}</text>

                  <div class="height32"></div>
                  <text class="font24 text2">{{T("累计跟单人数")}}</text>
                  <text class="font24 text1">{{myMap.totalCounts}}</text>
                </div>

                <div class="column">
                  <text class="font24 text2">{{T("累计跟单收益")+'(BTC)'}}</text>
                  <div class="row acenter">
                    <text :class="['font24', Config.upDownFont(myMap.totalIncome)]">{{math.addJia(myMap.totalIncome)}}</text>
                    <text :class="['font20', Config.upDownFont(myMap.totalIncome)]">{{'('+math.addJia(myMap.totalIncomeRate)+'%'+')'}}</text>
                  </div>
                  
                  <div class="height32"></div>
                  <div class="row acenter">
                    <text class="font24 text2">{{T("默认佣金")+'  '}}</text>
                    <LImage class="edit" :src="Config.img('editor_blue.png')" @click="moneyClick"></LImage>
                  </div>
                  <text class="font24 text1">{{myMap.defaultCommission + ' VTN'}}</text>
                  <text class="font24 text1">{{'(' + (myMap.isVtnEquity ? T('含提现权益') : T('不含提现权益')) + ')'}}</text>
                </div>

                <div class="column aend">
                  <text class="font24 text2">{{T("当前跟单人数")}}</text>
                  <text class="font24 text1">{{myMap.followCount}}</text>
                </div>
              </div>
            </div>
            
            <div class="total bg3">
              <text class="font20 text2">{{T('累计佣金收入')}}</text>
              <div class="all"></div>
              <text class="font24 text1">{{myMap.commissionIncome+'VTN'}}</text>
            </div>
            
            <!--菜单-->
            <SubMenu class="menu" :type="1" :menu="menu" :menus="menus" @menuClick="menuClick"></SubMenu>
          </div>

          <!--列表数据-->
          <div class="cellstr" v-else-if="item.followName" @click="cellClick(item)">
            
            <div class="cellstr-content bg2">
              <LImage class="texture2" :src="Config.img('texture2.png')"></LImage>
              <div class="cellstr-row">
                <text class="font32 text1">{{T(item.followName)}}</text>
                <div class="cell-exch bk1">
                  <text class="font20 text1">{{item.exchangeNames[0]}}</text>
                </div>
                <div class="all"></div>
                <text :class="['font32', Config.upDownFont(item.realYearIncome)]">{{math.addJia(item.realYearIncome)+'%'}}</text>
              </div>
              
              <div class="cellstr-row">
                <div class="cellstr-tag bk1" v-for="(tag,ti) in item.mark"  :key="'tag'+ti">
                  <text class="font20 main-t1">{{tag}}</text>
                </div>
                <div class="all"></div>
                <text class="font24 text3">{{T('年化收益率')}}</text>
              </div>
              
              <div :class="['cellof-type', item.isContract ? 'cellof-type-hong' : '']">
                <text :class="['font22', item.isContract ? 'udRed-t1' : 'main-t1']">{{item.isContract ? T('合约') : T('币币')}}</text>
              </div>
            </div>
          </div>

          <div class="genduo-bg" v-else>
            <text class="font22 text3">{{T('没有更多数据')}}</text>
          </div>
        </cell>

      </list>
    </div>

    <!-- <DebugView ref="debugView"></DebugView> -->
  </div>
</template>

<script>

//组件
import SubMenu from '@/public/view/SubMenu.vue' 

//功能
import Config from "@/_js/config";
import Event from "@/_js/event";
import navigator from "@/_js/navigator";
import broadcast from "@/_js/broadcast";
import modal from "@/_js/modal";
import math from "@/_js/math";

const weexFunction = weex.requireModule("WeexFunction");
import weexHttp from "@/_js/https"; ;

import I18N from "@/_i18n/i18n";
var T = I18N.t;
weexFunction.setTitle(T('我是跟单发起人'));

//跟单发起人
export default {

  components: {
    SubMenu,
    // DebugView, // 注册调试工具视图
  },

  data() {
    return {
      Config:Config,
      T: T,
      math:math,

      myMap: undefined,


      menu: 0,
      menus:[T('当前策略'), T('历史策略')],
      datas:[{}],

      pageNo1: 0,
      strategys: [{}], //发起列表
      onLoad1: false, //true加载中
      max1: false, //true无跟多数据

      
      pageNo2: 0,
      historys: [{}], //历史发起列表
      onLoad2: false, //true加载中
      max2: false, //true无跟多数据

    };
  },

  mounted() {
    
    Config.init(()=>{

      this.httpInitiatorDetail();

      // 每次重新显示，都再次触发刷新
      Event.onShow(()=>{
        this.pageNo1 = 0;
        this.max1 = false;
        this.strategys = [{}];

        this.pageNo2 = 0;
        this.max2 = false;
        this.historys = [{}];
        
        this.httpInitiatorDetail();
        
      });
      

    },[Config.OPT_UP_DOWN]);

    // 初始化调试工具
    // debug.bind(this.$refs.debugView);

  },

  methods: {

    //http跟单人详情
    httpInitiatorDetail() {
    
      modal.showLoad();
      var param = {};
      weexHttp.post("follow/queryFollowMyStrategy",param,true,(data) => {
        modal.hideLoad();
        if (data.status == 200) {
          data = data.data;

          this.myMap = data.myInfoMap;

          // 如果没有设置个性签名时，要保存一个空值，避免修改后界面不更新问题
          if(!this.myMap.mark){
            this.myMap.mark = "";
          }

          //累计跟单收益率
          var totalIncomeRate = math.chu(this.myMap.totalIncome, this.myMap.totalInvest, 4, 2);
          totalIncomeRate = math.cheng(totalIncomeRate, '100', 2, 2);
          this.myMap['totalIncomeRate'] = totalIncomeRate;
          
          if (this.menu == 0) {
            this.httpFollowStrategyList();
          }else{
            this.httpFollowHistoryList();
          }
          
        } else {
          modal.toast(data.msg);
        }
      });
    },

    //http发布列表
    httpFollowStrategyList() {
      
      if (this.myMap == undefined) return;
      if (this.onLoad1) return;
      if (this.max1) return;
      this.onLoad1 = true;
      var param = {pageNo:this.pageNo1+1};
      weexHttp.post("follow/queryFollowStrategyList", param,true,(data) => {
        
          this.onLoad1 = false;
          
          if (data.status == 200) {
            data = data.data;
            for (let index = 0; index < data.length; index++) {
              var datas = data[index];
              datas.exchangeNames = datas.exchangeNames ? datas.exchangeNames : [];
              datas.mark = datas.mark ? datas.mark : [];
              datas.isContract = (datas.isContract == 'contract' || datas.isContract == 'contract_usdt');
            }

            this.pageNo1++;
            this.strategys.push(...data);

            if (data.length < 20) {
              this.max1 = true;
              this.strategys.push({});
            }

            if (this.menu == 0) {
              this.datas = this.strategys;
            }
          } else {
            modal.toast(data.msg);
          }
        }
      );
    },

    //http历史发布列表
    httpFollowHistoryList() {
      
      if (this.myMap == undefined) return;
      if (this.onLoad2) return;
      if (this.max2) return;
      this.onLoad2 = true;
      var param = {userId: this.myMap.userId, pageNo: this.pageNo2+1};
      weexHttp.post("follow/queryFollowHistoryList",param,true,(data) => {

          this.onLoad2 = false;
          if (data.status == 200) {
            data = data.data;
            for (let index = 0; index < data.length; index++) {
              var datas = data[index];
              datas.exchangeNames = datas.exchangeNames ? datas.exchangeNames : [];
              datas.mark = datas.mark ? datas.mark : [];
              datas.isContract = (datas.isContract == 'contract' || datas.isContract == 'contract_usdt');
            }

            this.pageNo2++;
            this.historys.push(...data);
            if (data.length < 20) {
              this.max2 = true;
              this.historys.push({});
            }

            if (this.menu == 1) {
              this.datas = this.historys;
            }
          } else {
            modal.toast(data.msg);
          }
        }
      );
    },

    //http编辑签名
    httpEditMarkitem(value){

      modal.showLoad();
      var param = {"mark":value};
      weexHttp.postX("systemV2/editMark",param,true,(data) => {
          modal.hideLoad();
          if (data.status == 200) {
            this.myMap.mark = value;
            this.$forceUpdate();
            modal.toast(T('修改成功'));
          } else {
            modal.toast(data.msg);
          }
        }
      );
    },
    
    /********************************** Get方法*/
    //获取+字符串
    getAddStr(value) {
      value = (math.getNumber(value) > 0 ? "+" :'') + math.xiaoShuDelete0(value);
      return value;
    },

    /********************************** 点击方法*/
    //菜单点击
    menuClick(index){
      this.menu = index;

      if(this.menu == 0){
        if(this.strategys.length == 1 && !this.max1) {
          this.httpFollowStrategyList();
        }else{
          this.datas = this.strategys;
        }
      }else{
        if(this.historys.length == 1 && !this.max2) {
          this.httpFollowHistoryList();
        }else{
          this.datas = this.historys;
        }
      }
    },

    //标签点击
    markClick(){
      
      var option = {title:T("签名"),
                   placeholder:T("请输入签名1~10字"), 
                   value:this.myMap.mark,
                   max:10};

      modal.prompt(option,(value)=>{
        if (!value.length) {
          modal.toast(T('输入不能为空'));
          return;
        };
        this.httpEditMarkitem(value);
      });
    },

    //佣金点击
    moneyClick(){
      
      var param = {'defaultCommission':this.myMap.defaultCommission, 
                   'isVtnEquity':this.myMap.isVtnEquity}
      navigator.openDialog("follw/SetFollwMoney", param);

      var self = this;
      const aPost = new BroadcastChannel("SetFollwMoney");
      aPost.onmessage = function(event) {
        var data = event.data;
        self.myMap.defaultCommission = data.defaultCommission;
        self.myMap.isVtnEquity = data.isVtnEquity;
      };
    },


    //策略点击
    cellClick(item) {
      return;
      var url = this.menu == 0 ? "follw/MFollwStrategyInfo" : "follw/MFollwStrategyInfoHistory";
      var param = {'executeId':item.executeId};
      navigator.open('', url, param);
    }
  },
};
</script>


<style src="@/_css/style.css"></style>
<style scoped>
/*********************************** 基础*/
.bg {
  width: 750px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.edit{
  width: 32px;
  height: 32px;
  margin-right: 10px;
}
.edit-text{
  width: 500;
}

/*********************************** 顶部*/
.top-bg{
  position: absolute;
  width: 750px;
  height: 504px;
  top: -128px;
}
.top-info {
  flex-direction: row;
  align-items: center;
  width: 750px;
  height: 244px;
}
.top-img {
  width: 96px;
  height: 96px;
  border-radius: 48px;

  margin-left: 80px;
  margin-right: 40px;
}

.data{
  width: 710px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;

  padding-left: 50px;
  padding-right: 50px;
  padding-top: 40px;
  padding-bottom: 40px;

  margin-left: 20px;
}
.data-row{
  flex-direction: row;
  justify-content: space-between;
}
.data-column-left{
  flex-direction: column;
}
.data-column-right {
  flex-direction: column;
  align-items: flex-end;
}

.total {
  flex-direction: row;
  align-items: center;

  width: 710px;
  height: 60px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;

  padding-left: 50px;
  padding-right: 50px;

  margin-left: 20px;
}

/*********************************** 菜单*/
.menu {
  margin-top: 40px;
  margin-bottom: 20px;
}

/***********************************列表*/
.list {
  width: 750px;
  margin-top: 2px;
}
.cell-exch {
  flex-direction: row;
  align-items: center;
  height: 33px;
  border-radius: 20px;
  border-width: 2px;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: 12px;
}

/*********************** 策略*/
.cellstr {
  flex-direction: row;
  justify-content: center;
  width: 750px;
  margin-top: 20px;
}
.cellstr-content {
  flex-direction: column;
  justify-content: space-between;
  width: 710px;
  height: 200px;
  border-radius: 8px;
  padding: 50px;
}
.cellstr-row {
  flex-direction: row;
  align-items: center;
}
.cellstr-tag {
  height: 34px;
  justify-content: center;
  align-items: center;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
  border-width: 2px;
  padding-left: 12px;
  padding-right: 12px;

  margin-right: 10px;
}

.genduo-bg {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 750px;
  height: 100px;
}

/*类型标签*/
.cellof-type{
  position: absolute;
  flex-direction: row;
  align-items: center;
  height: 32px;
  padding-left: 10px;
  padding-right: 10px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;

  background-color: rgba(22, 119, 254, 0.1);

  top: 0;
  right: 0;
}
.cellof-type-hong{
  background-color: rgba(252, 97, 128, 0.1);
}

/***********************************公共用的样式*/
.height22{
  height: 22px;
}
.height32{
  height: 32px;
}
</style>
